import { Component, Input, output, Output, EventEmitter } from '@angular/core';
// import { DUMMY_USERS } from '../dummy-users';
// const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
import { type UserType } from './user.model';
import { Card } from "../shared/card/card";

@Component({
  selector: 'app-user',
  standalone: false,
  templateUrl: './user.html',
  styleUrl: './user.scss',
})
export class User {
  /**
   * selectedUser = signal(DUMMY_USERS[randomIndex]);
  get imagePath() {
    return 'assets/users/' + this.selectedUser().avatar;
  }
  imagePath = computed(() => {
    return 'assets/users/' + this.selectedUser().avatar;
  });
  onSelectUser () {
    const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
    this.selectedUser.set(DUMMY_USERS[randomIndex]);
  }
   */
  /**
   * 方法1 装饰器
   * @Input({required: true}) avatar!: string;
   * @Input({required: true}) name!: string;
   * 方法2 input(signal方法)
   */
  //只读信号
  // avatar = input.required<string>();
  // name = input.required<string>();
  // onSelectUser() {}
  // imagePath = computed(() => {
  //   return 'assets/users/' + this.avatar();
  // });
  //这个output是一个事件发射器，不是信号，而input是一个信号，output创建了一个自定义事件
  // select = output<string>()
  @Output() select = new EventEmitter<string>();

  @Input({required: true}) user!: UserType;

  get imagePath() {
    return 'assets/users/' + this.user.avatar;
  }

  onSelectUser(){
    this.select.emit(this.user.id);
  }
  @Input({required: true}) isSelected!: boolean;
}
